<template>
	<div class="user_depart_wrapper">
		<h2>用户部门</h2>
		<el-input size="medium" placeholder="输入部门关键字" clearable v-model="filterText"></el-input>
		<el-tree v-bind="treeConfig" :data="departTree" @node-click="handleDepartTree"></el-tree>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			filterText: '',
			treeConfig: {
				ref: 'tree',
				nodeKey: 'id',
				highlightCurrent: true,
				defaultExpandAll: false,
				expandOnClickNode: false,
				filterNodeMethod: this.handleFilterNode,
				props: { label: 'name', children: 'childList' }
			},
			checkedDepart: ''
		};
	},
	computed: { ...mapGetters(['departTree']) },
	watch: {
		filterText(val) {
			this.$refs['tree'].filter(val);
		}
	},
	methods: {
		handleDepartTree(data, node) {
			if (!!this.checkedDepart && this.checkedDepart === data.id) {
				this.checkedDepart = null;
				this.$nextTick(() => {
					this.$refs['tree'].setCurrentKey(null);
				});
			} else {
				this.checkedDepart = data.id;
			}
			this.$emit('checked', this.checkedDepart);
		},

		handleFilterNode(value, data) {
			if (!value) return true;
			return data.name.indexOf(value) !== -1;
		}
	}
};
</script>

<style lang="scss" scoped>
.user_depart_wrapper::v-deep {
	display: flex;
	flex-direction: column;
	width: 20%;
	min-width: 210px;
	flex-shrink: 0;
	border-right: solid 1px #ebeef5;
	h2 {
		height: 48px;
		flex-shrink: 0;
		font-size: 16px;
		padding: 0 16px;
		line-height: 48px;
		border-bottom: solid 1px #ebeef5;
	}
	.el-input {
		flex-shrink: 0;
	}
	.el-input__inner {
		border: none;
		border-radius: 0;
		border-bottom: solid 1px #ebeef5;
	}
	.el-tree {
		flex: 1;
		overflow: auto;
	}
	.el-tree-node__content {
		height: 36px;
	}
}
</style>
